<template>
  <div class="login-container">
    <!--    <van-tag class="text-tag" type="danger" size="large">温馨提示：【未提供最终内容】</van-tag>-->

    <div class="wrapper">
      <div class="logo-box">
        <img src="~@/assets/img/main-title.png" class="logo"/>
      </div>

      <van-form @submit="onSubmit">
        <van-field
          v-model="loginInfo.phone"
          autocomplete="off"
          name="tel"
          label="手机号码"
          placeholder="手机号码"
          maxlength="11"
          :rules="[{ required: true }]"
        />
        <van-field
          v-model="loginInfo.verifyCode"
          autocomplete="off"
          name="msgcode"
          label="验证码"
          placeholder="验证码"
          maxlength="6"
          :rules="[{ required: true }]"
        >
          <template #button>
            <van-button
              round
              plain
              type="info"
              size="small"
              native-type="button"
              :disabled="verifyCodeBtn"
              @click="getVerifyCode"
            >{{ verifyCodeBtnName }}
            </van-button
            >
          </template>
        </van-field>
        <!--        <router-link to="reg" class="reg" v-if="isReg">马上注册</router-link>-->

        <div class="handler-btn">
          <van-button size="normal" round type="danger" plain @click="goHome" class="btn">返回首页</van-button>
          <van-button size="normal" round type="info" plain native-type="submit" class="btn">登录</van-button>
        </div>

      </van-form>
      <!--      <a href="https://postdocinno.gdhrss.gov.cn/webpolicydetail?columnName=third&detailId=420">-->
      <!--        <van-notice-bar wrapable :scrollable="false" class="notice">-->

      <!--          各位专家、选手、参会人员：为全面贯彻落实国务院联防联控机制工作部署，切实保障大家的身体健康和生命安全，经综合研判，原定于11月19日-21日在广东省佛山市举办的第一届全国博士后创新创业大赛延期举办。具体时间另行通知（详见https://postdocinno.gdhrss.gov.cn/webpolicydetail?columnName=third&detailId=420）。-->

      <!--        </van-notice-bar>-->
      <!--      </a>-->

      <!--      <van-notice-bar wrapable :scrollable="false" class="notice">-->
      <!--        温馨提示：请参赛选手于11月8日至11月10日按《关于第一届全国博士后创新创业大赛总决赛创新赛、创业赛和揭榜领题赛组别赛事安排的公告》要求输入手机号码登录，提交证件照、完善参会信息、上传新冠肺炎疫情防控有关信息。-->
      <!--      </van-notice-bar>-->
      <div class="flex-center question">
        <!--        <a class="question-item" href="https://docs.qq.com/sheet/DY3ppUkVlekNUZkhK?tab=BB08J2">常见问题答疑</a>-->
        <p class="question-item" @click="$router.push({name: 'RczcDetail', params: { docxName: 'cabmCzzn.docx' }})">
          操作指南</p>

      </div>
      <!--      <van-overlay :show="pdfShow">-->
      <!--        <pdf-component pdfSrc="./pdf/czzn.pdf" :close="true" @pdfClose="pdfShow=false"></pdf-component>-->
      <!--      </van-overlay>-->
    </div>
  </div>
</template>

<script>
import PdfComponent from '@/components/PdfComponent'
import { login } from 'api/user'
import { setToken, setCookie } from '@/utils/tokenUtil'
import { getVerifyCode } from 'api/user'
import { encryptAes } from '@/utils/encryptUtil'
import { parseTime } from '@/utils'

export default {
  metaInfo: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width,initial-scale=1.0, maximum-scale=2.0, user-scalable=yes' }
    ]
  },
  name: 'Login',
  components: {
    PdfComponent
  },
  data() {
    return {
      loginInfo: {
        phone: '',
        verifyCode: ''
      },
      verifyCodeBtn: false,
      deadLineTime: 60,
      timer: null,
      barStyle: {
        backgroundColor: 'transparent'
      },

      pdfSrc: '',
      pdfShow: false,
      isReg: true
    }
  },

  mounted() {
    console.log('登录页面mounted....')
  },
  methods: {
    timeDowm() {
      // const tel = ['15626483714', '15813064617', '13378644336', '13751741235', '18825980052']
      // const endTime = parseTime(new Date(), '{d}')
      // if (parseInt(endTime) < 6) {
      //   // this.isReg = false
      //   if (!!this.loginInfo.phone && tel.indexOf(this.loginInfo.phone) > -1) {
      //     return true
      //   } else {
      //     this.$dialog.alert({
      //       message: '您好！参会报名功能正在维护，暂停使用。请于12月6日9:00至8日24:00再次登陆更新您的参会信息。另请参赛选手于12月5日前登录大赛官网填报参赛回执后，按时登录本系统更新参会信息。谢谢！'
      //     })
      //     return false
      //   }
      // }
      // return true
    },
    // 返回上级
    goBack() {
      this.$router.go(-1)
    },
    goHome() {
      this.$router.push({ name: 'Home' })
    },
    onSubmit(data) {
      let encryptStr = encryptAes(JSON.stringify({ tel: data.tel }))
      setCookie('tel', encryptStr, 14)
      login(data).then(res => {
        console.log('登录成功，返回的数据信息:' + res)
        setToken(this.loginInfo.phone)
        console.log('重定向到个人中心')
        this.$router.push({ name: 'PersonalCenter' })
      })
    },
    getVerifyCode() {
      if (!!this.loginInfo.phone && this.loginInfo.phone.length == 11) {
        this.verifyCodeBtn = true
        this.timer = window.setInterval(this.countDown, 1000)
        getVerifyCode(this.loginInfo.phone, '0')
          .then(res => {
            this.$dialog.alert({
              message: res.msg
            })

          })
          .catch(err => {
            this.countDown(true)
          })
      } else {
        this.$dialog.alert({
          title: '错误信息',
          message: '手机号码不正确'
        })
      }
    },
    countDown(control = false) {
      // console.log(this.deadLineTime)
      if (this.deadLineTime <= 0 || control) {
        window.clearInterval(this.timer)
        this.timer = null
        this.verifyCodeBtn = false
        this.deadLineTime = 60
      } else {
        this.deadLineTime = this.deadLineTime - 1
      }
    }
  },
  computed: {
    verifyCodeBtnName() {
      if (this.deadLineTime == 60) {
        return '获取验证码'
      } else {
        return '获取验证码(' + this.deadLineTime + ')'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets/css/login.scss';

.question {
  margin-top: 15px;

  &-item {
    color: white;
    font-size: 14px;
    margin-left: 20px;
    font-weight: bold;
    border-bottom: 1px solid #ffffff;

    &:first-child {
      margin-left: 0px;
    }
  }
}

.notice {
  margin-top: 20px;
  border-radius: 10px;
  padding: 8px;
}

/deep/ .pdf-pox {
  height: 100%;
}

</style>
